<template>
  <div class="d-view choose-path" v-loading="loading">
    <div class="header">
      <div class="title">
        <span>选择屏幕</span>
        <title-decorate class="title-decorate" :row="4" :col="20" :diffRow="2" :diffCol="13"></title-decorate>
      </div>
      <div class="operation">
        <headerBtn></headerBtn>
      </div>
    </div>
    <div class="main">
      <div class="path-list">
        <div class="path-item" v-for="(item,index) in pathList" :key="index">
          <img v-if="item.img" :src="item.img" @click="path=item.path" :style="{'height':imgHeight}">
          <div v-else class="default-box" @click="path=item.path" :style="{'height':imgHeight}">
            <i class="iconfont icon-add-select"></i>
          </div>
          <el-radio v-model="path" :label="item.path">{{ item.label }}</el-radio>
          <div class="set-box" v-if="item.path==='/default'" @click="handleSet">
            <i class="iconfont icon-set"></i>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-button round size="small" @click="$router.go(-1)">取消</el-button>
      <el-button type="primary" size="small" round @click="goTo(path)">确定</el-button>
    </div>
    <DefaultSetDialog ref="defaultSetDialogRef"></DefaultSetDialog>
  </div>
</template>

<script>
import TitleDecorate from "@/components/TitleDecorate";
import path1 from '@/assets/image/chosePath/path1.jpg'
import path2 from '@/assets/image/chosePath/path2.jpg'
import path3 from '@/assets/image/chosePath/path3.jpg'
import path4 from '@/assets/image/chosePath/path4.jpg'
import {autoLogin, loginInfo, openLiveWindow} from "@/utils/brower";
import {baseRequest, SCREEN_CODE} from "@/utils/http/request";
import DefaultSetDialog from "@/views/chosePath/components/DefaultSetDialog";
import headerBtn from "../../components/headerBtn.vue";

export default {
  name: "App",
  components: {
    'title-decorate': TitleDecorate,
    DefaultSetDialog,
    headerBtn
  },
  mounted() {
    const token = sessionStorage.getItem('token')
    const pwdStr = localStorage.getItem('auto')
    const account = localStorage.getItem('username')

    if (!token) {
      // 没有token 走判断
      autoLogin((res) => {
        if (res && pwdStr) {
          this.login(account, window.atob(pwdStr))
        }
      })
    } else {
      this.getData()
    }
    this.$nextTick(() => {
      const mainDom = document.querySelector('.main')
      this.imgHeight = (mainDom.offsetWidth * 0.3 / 16 * 9) + 'px'
    })

    window.addEventListener('resize', () => {
      const mainDom = document.querySelector('.main')
      this.imgHeight = (mainDom.offsetWidth * 0.3 / 16 * 9) + 'px'
    })
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.path = from.path;
    })

  },
  data() {
    return {
      imgHeight: 'auto',
      loading: false,
      path: '',
      pathList: [
        {
          img: path1,
          label: '工地数据屏',
          path: '/'
        },
        {
          img: path2,
          label: '工艺展示屏',
          path: '/bigScreen'
        },
        {
          img: path3,
          label: '工地视频屏',
          path: '/videoList'
        },
        {
          img: path4,
          label: '工地直播屏',
          path: 'live'
        },
        {
          img: null,
          label: '默认屏',
          path: '/default'
        }
      ]
    }
  },
  methods: {
    handleSet() {
      this.$refs.defaultSetDialogRef.openDialog()
    },
    async login(username, pwd) {
      this.loading = true
      await baseRequest.login({
        username: username,
        pwd: pwd,
        screenCode: SCREEN_CODE.construction
      }).then(res => {
        const {code, token, screenName} = res
        if (code === '01') {
          loginInfo(this.account, this.password)
          sessionStorage.setItem('token', token)
          sessionStorage.setItem('screenName', screenName)
          sessionStorage.setItem('username', this.account)
        }

      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })

      this.getData()
    },
    goTo(path) {
      if (path === 'live') {
        openLiveWindow()
      } else {
        this.$router.push(path)
      }
    },
    getData() {
      this.loading = true
      baseRequest.screensaverGet().then(res => {
        const {image_datalist, video_datalist} = res
        if (res.code === '01') {
          this.$store.commit('SET_SCREENSAVER', res.is_show === '1')
          localStorage.setItem('screensaver', res.is_show)
          let dataList = []
          if (video_datalist && video_datalist.length > 0) {
            dataList = video_datalist.map(item => {
              return {...item, is_delete: '0', url: item.video_image}
            })
          } else {
            dataList = image_datalist.map(item => {
              return {...item, is_delete: '0'}
            })
          }
          if (dataList.length > 0) {
            this.pathList[this.pathList.length - 1].img = dataList[0].url
          }

        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/base";

.choose-path {
  background: $color-black-1000;
  padding: $spacing-narrow $spacing-large;

  .header {
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;

    .title {
      color: $color-warning-400;
      font-size: 1.8rem;
      font-weight: bold;
      line-height: 1;
      display: flex;
      align-items: center;

      .title-decorate {
        margin-left: $spacing-base;

        ::v-deep.col {
          background: $color-alpha-warning-300-64;
        }
      }
    }

    .action {
      display: flex;

      .btn {
        //background: $color-alpha-white-32;
        //border-radius: 4px;
        cursor: pointer;
        //padding: $spacing-mini-er;

        .iconfont {
          font-size: 1.6rem;
        }

        img {
          width: 1.8rem;
        }

        //&:hover {
        //  background: $color-alpha-white-64;
        //  transition: all $transition-timing-function $transition-duration-12;
        //}

        & + .btn {
          margin-left: $spacing-base;
        }
      }
    }
  }


  .path-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .path-item {
      width: 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 3%;
      margin-bottom: 40px;
      cursor: pointer;
      position: relative;

      .default-box {
        border: 1px solid #00a9e2;
        width: 100%;
        margin-bottom: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;

        i {
          font-size: 6rem;
          color: $color-alpha-white-80;
        }
      }

      img {
        width: 100%;
        object-fit: cover;
        border: 1px solid #00a9e2;
        margin-bottom: 1rem;
      }

      .set-box {
        color: $color-black-300;
        bottom: 0;
        right: 0;
        position: absolute;

        i {
          font-size: 1.5rem;
        }
      }

      ::v-deep.el-radio {
        color: white;
      }
    }
  }

  .footer {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
  }
}
</style>

